import React, { Component } from 'react';
import './Tabbar.scss'
class Tabbar extends Component {
    constructor(props){
        super(props)
        this.state={
            currentIndex:0,
            list:[
                {
                    icon:"iconfont icon-xiazai45",
                    title:"首页"
                },
                {
                    icon:"iconfont icon-fenlei ",
                    title:"分类"
                },
                {
                    icon:"iconfont icon-xingzhuang",
                    title:"全部"
                },
                {
                    icon:"iconfont icon-gouwuche",
                    title:"购物车"
                },
                {
                    icon:"iconfont icon-wode",
                    title:"个人中心"
                },

            ]
        }
        // this.handleClick.bind(this)
    }
    handleClick(index){
        this.setState({
            currentIndex:index
        })
    }
    render() {
        return (
            <div className='tabbar'>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <div onClick={function(){this.handleClick(index)}.bind(this)} className={this.state.currentIndex === index ? 'actives' : ''}>
                                <i className={`icon ${item.icon}`}></i>
                                <span>{item.title}</span>
                            </div>
                        )
                    })
                }
                
            </div>
        );
    }
}

export default Tabbar;